<template>
  <div class="main-style-D">
    <el-row style="height: 215px;background: #e8f5e9">
      <el-col :span="3"><div class="grid-content "></div></el-col>
      <el-col :span="11"><div class="grid-content ">
        <el-row>
          <el-col  id="marks" :span="12"><div class="grid-content bg-purple">
            <p style="font-size: 30px;margin-top: 45px;color:#2e7d32;">{{this.job_info.job_title}}</p>
            <p style="font-size: 16px;margin-left: 6px;color:#2e7d32">{{job_info.job_content}}·{{job_info.job_experience}}·{{job_info.job_education}}</p>
            <el-button  :icon="showIcon" @click="open">{{styles}}</el-button>

          </div></el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light">
              <p style="font-size: 30px;margin-top: 45px;margin-left: 10px;color: #fa6a43">{{job_info.job_money}}</p>
            </div></el-col>
          <el-col :span="9"><div class="grid-content bg-purple-light"></div></el-col>

        </el-row>
      </div></el-col>
      <el-col :span="10"><div class="grid-content  label">
        <el-tag v-for="(item,index) in labels">{{index}}</el-tag>

      </div>
        <el-tag style="  background: rgb(232, 245, 233) none repeat scroll 0% 0%;
                border: 2px solid rgb(102, 187, 106);
                color: rgb(102, 187, 106);
                font-weight: bold;
                border-radius: 15px;
                font-size: 12px;
                margin-top: 15px;
                margin-left: 5px;">
          <el-tooltip style="display:inline "  :content="this.more_info"  effect="light"  placement="right-end">
            <p style="margin-bottom:0;margin-top: 0;font-size: 16px">更多</p>
          </el-tooltip>
        </el-tag>
      </el-col>
<!--      <el-col :span="3" style="margin-top: 25px"><div class="grid-content " >-->
<!--        <p style="font-size: 25px">1000</p>-->
<!--        <p>需求职位</p>-->
<!--      </div></el-col>-->
<!--      <el-col :span="3"   style="margin-top: 25px"><div class="grid-content " >-->
<!--        <p style="font-size: 25px">1000</p>-->
<!--        <p>需求人数</p>-->
<!--      </div></el-col>-->

    </el-row>
    <div style="width: 95%;margin-left: 2.5%">
      <Description></Description>
    </div>




  </div>
</template>

<script>

import { ElMessage } from 'element-plus'
import axios from 'axios'
import Description from '@/views/DetailJobInfo/components/description'

export default {
  name: 'index',
  components: { Description },
  data() {
    return {
      showIcon:"el-icon-star-off",
      styles:"收藏",
      labels:{},
      more_info:"",
      job_info:{
        job_content:"",
        job_experience:"",
        job_education:"",
        job_money:"",
        job_title:"",
        job_id:""
      }


    }
  },
  methods:{
    formatDateTime(){
      var date=new Date()
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h=h < 10 ? ('0' + h) : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var second=date.getSeconds();
      second=second < 10 ? ('0' + second) : second;
      return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    },
    open() {

      var _this=this

      if (this.styles==="收藏")
      {
        ElMessage('收藏成功')
        axios.post('http://localhost:8080/Add_Book_mark',{
          bm_account_number:localStorage.getItem("username"),
          bm_job_infor_id:sessionStorage.getItem("YHJobInfo_id"),
          book_mark_date:_this.formatDateTime()
        })
          .then(function (response){
            _this.styles="已收藏"
            _this.showIcon="el-icon-star-on"

          })
          .catch(function(error){
            console.log(error);
          });
      }
      else if(this.styles==="已收藏"){
        ElMessage('取消收藏成功')
        axios.post('http://localhost:8080/Delete_book_mark?bm_account_number='+localStorage.getItem("username")+"&bm_job_infor_id="+sessionStorage.getItem("YHJobInfo_id"))
          .then(function (response){
            console.log(response.data)
            _this.styles="收藏"
            _this.showIcon="el-icon-star-off"

          })
          .catch(function(error){
            console.log(error);
          });
      }

    },
     label_spli (datas) {
       var i=0

       var item=""
        for( item in datas){


          if(i>5){
            this.more_info=this.more_info+item+" "
          }
          else {
            this.labels[item]=datas[item]
          }
        }
       i=i+1

    }


  },
  created () {
    var _this=this
    this.job_info.job_content=sessionStorage.getItem("YHJob_content")
    this.job_info.job_experience=sessionStorage.getItem("YHJob_experience")
    this.job_info.job_education=sessionStorage.getItem("YHJob_education")
    this.job_info.job_title=sessionStorage.getItem("YHJob_title")
    this.job_info.job_money=sessionStorage.getItem("YHJob_money")
    this.job_info.job_id=sessionStorage.getItem("YHJobInfo_id")
    console.log( this.job_info.job_id)
    axios.post('http://localhost:8080/getJobTable?jobID='+this.job_info.job_id)
      .then (function (response) {
        console.log(response.data)

        _this.label_spli(response.data)
      })
      .catch(function (error) {
        console.log(error);
      });


    axios.post('http://localhost:8080/weather_book_mark?bm_account_number='+localStorage.getItem("username")+"&bm_job_infor_id="+sessionStorage.getItem("YHJobInfo_id"))
      .then (function (response) {
        console.log(response.data.result)
        if (response.data.result===1){
          _this.styles="已收藏"
          _this.showIcon="el-icon-star-on"
        }

      })
      .catch(function (error) {
        console.log(error);
      });

  },

}
</script>

<style >
#marks .el-button{
  color: rgb(102, 187, 106);
  border: 1px solid rgb(102, 187, 106);
  background: rgb(232, 245, 233);
}
#marks .el-button:hover{
  background: rgb(230, 240, 233);
}
.el-popper.is-light{
  background: rgb(230, 240, 233);
}
.label .el-tag{
  margin-top: 65px;
  font-size: 16px;
  margin-left: 5px;
  margin-right: 5px;
  background: rgb(232, 245, 233) none repeat scroll 0% 0%;
  border: 2px solid rgb(102, 187, 106);
  color: rgb(102, 187, 106);
  font-weight: bold;
  border-radius: 15px;
}

.main-style-D{
  position:relative;
  background: #FFFFFF;
  left: 15%;
  width: 70%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.main-style-D .el-tabs__nav-wrap::after{
  background: #FFFFFF;
}
.main-style-D .el-tabs__item.is-active{
  color: #1b5e20;
  font-weight: bold;
  background: #FFFFFF;
}
.main-style-D .el-tabs__active-bar{
  background: #FFFFFF;
}
.main-style-D .el-tabs__item:hover{
  color: #1b5e20;
  background: #FFFFFF;
}
.main-style-D .el-tabs__item{
  padding-right: 10px;
  padding-left: 10px;

  font-size: 16px;
  color: rgb(102, 187, 106);
}
.main-style-D .el-tabs__header{
  background: #e8f5e9;
}
.main-style-D .el-tabs__nav{
  left: 5%;
}
.main-style-D .el-descriptions__label.is-bordered-label{
  background: #e8f5e9;
}
.main-style-D #tab-first.el-tabs__item.is-top.is-active
{
  padding-left: 10px;
  padding-right: 10px;
}
.main-style-D #tab-second.el-tabs__item.is-top{
  padding-left: 10px;
  padding-right: 10px;
}
</style>
